import React from 'react';
import { CheckCircle, Circle } from 'lucide-react';

const steps = [
  { number: 1, title: "项目信息", subtitle: "基本工程信息" },
  { number: 2, title: "测量数据", subtitle: "跨越相关数据" },
  { number: 3, title: "施工方法", subtitle: "选择施工方案" },
  { number: 4, title: "方案细节", subtitle: "资源配置与措施" },
  { number: 5, title: "预览确认", subtitle: "生成最终方案" }
];

export default function WizardHeader({ currentStep }) {
  return (
    <div className="flex items-center justify-between">
      {steps.map((step, index) => (
        <div key={step.number} className="flex flex-col items-center flex-1">
          <div className="flex items-center w-full">
            <div className={`flex items-center justify-center w-10 h-10 rounded-full border-2 ${
              step.number < currentStep 
                ? 'bg-green-500 border-green-500 text-white' 
                : step.number === currentStep
                ? 'bg-blue-500 border-blue-500 text-white'
                : 'bg-gray-200 border-gray-300 text-gray-500'
            }`}>
              {step.number < currentStep ? (
                <CheckCircle className="w-5 h-5" />
              ) : (
                <span className="font-semibold">{step.number}</span>
              )}
            </div>
            {index < steps.length - 1 && (
              <div className={`flex-1 h-0.5 mx-4 ${
                step.number < currentStep ? 'bg-green-500' : 'bg-gray-300'
              }`} />
            )}
          </div>
          <div className="text-center mt-3">
            <div className={`font-medium text-sm ${
              step.number <= currentStep ? 'text-gray-900' : 'text-gray-500'
            }`}>
              {step.title}
            </div>
            <div className="text-xs text-gray-500 mt-1">
              {step.subtitle}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}